<template>
	<view class="task-page full box relative bg-primary flex-col">
		<view class="tab-wrap">
			<u-tabs active-color="#3361F0" :bar-height="6" :bold="false" :list="tabList" :is-scroll="false"
				v-model="currentTab" @change="handleTabChange" :bar-style="{bottom:'-4px'}" />
		</view>
		<view class="w-wrap">
			<view class="w-inner">
				<mescroll-uni @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback">
					<view class="record-list">
						<view class="record-item">
							<view class="record-header">
								<text class="item-circle"></text>
								<text class="item-title">设备报警</text>
								<text class="item-status">未完成</text>
							</view>
							<view class="item-content">
								<image
									src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/20250803233719c39210150.png"
									mode="aspectFill" class="item-icon"></image>
								<view class="item-details">
									<text class="item-text">制水保护</text>
									<text class="item-user">用户: 首善人家 [ID:190381]</text>
								</view>
								<view class="item-btn">
									<text>查看详情</text>
								</view>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				currentTab: 0,
				tabList: [{
					name: '未完成(2)'
				}, {
					name: '审核中(0)'
				}, {
					name: '已完成(0)',
					count: 5
				}]
			}
		},
		methods: {
			handleTabChange(index) {
				this.currentTab = index
			}
		},
	}
</script>

<style lang="scss" scoped>
	.task-page {
		.record-list {
			padding: 32rpx 24rpx 0;
			box-sizing: border-box;
			position: relative;

			.record-item {
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.item-content {
					padding: 42rpx 40rpx 46rpx 36rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;

					.item-btn {
						margin-left: auto;
						background: linear-gradient(90deg, #85AAE6 0%, #0967FE 100%);
						padding: 6rpx 14rpx;
						font-size: 22rpx;
						color: #FFFFFF;
						line-height: 44rpx;
						border-radius: 68rpx;
					}

					.item-details {
						margin-left: 24rpx;
						display: flex;
						flex-flow: column;

						.item-text {
							font-weight: bold;
							font-size: 28rpx;
							color: #7C7C7C;
							line-height: 44rpx;
						}

						.item-user {
							font-size: 22rpx;
							color: #636363;
							line-height: 44rpx;
						}
					}

					.item-icon {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.record-header {
					display: flex;
					align-items: center;
					padding: 14rpx 40rpx 20rpx 36rpx;
					border-bottom: 2rpx solid #EBEBEB;

					.item-status {
						font-weight: bold;
						font-size: 26rpx;
						color: #3361F0;
						line-height: 44rpx;
						margin-left: auto;
					}

					.item-title {
						font-size: 26rpx;
						color: #747474;
						line-height: 44rpx;
						margin-left: 8rpx;
					}

					.item-circle {
						width: 21rpx;
						height: 21rpx;
						background: #26CF1F;
						border-radius: 50%;
					}
				}
			}
		}
	}
</style>